<template>
    <div>
        <!-- 搜索 -->
        <el-form :model="formItem"  label-width="80px" :inline="true" class="demo-form-inline">
            <el-row>
                <el-form-item label="关键字">
                    <el-select v-model="formItem.type" placeholder="请选择">
                        <el-option label="用户手机" value="1"></el-option>
                        <el-option label="用户名" value="2"></el-option>
                    </el-select>
                    <el-input v-model="formItem.keyword" placeholder="关键字" style="width:200px;"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="开始时间">
                    <el-date-picker v-model="formItem.start_time" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker v-model="formItem.end_time" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchSubmit('formItem')">搜索</el-button>
                </el-form-item>
            </el-row>
        </el-form>

        <el-table ref="selection" :data="listData" border tooltip-effect="dark" style="width: 100%" @selection-change="select">
            <el-table-column fixed type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="名称" width="200"></el-table-column>
            <el-table-column prop="mobile" label="用户手机" width="200"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    {{scope.row.status == 1?'已处理':'未处理'}}
                </template>
            </el-table-column>
            <el-table-column prop="dispose_remark" label="备注" width="200"></el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status ==2" @click.native.prevent="dispose(scope.$index)" type="primary" size="mini">处理</el-button>
                    <el-button @click.native.prevent="del(scope.$index)" type="danger" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="text-align : right; float : right; margin-top: 10px;">
            <!--<span class="demonstration">完整功能</span>-->
            <el-pagination
                    @size-change="handlePageSize"
                    @current-change="handlePage"
                    :current-page="pageNum"
                    :page-sizes="[10, 50, 100, 200]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal">
            </el-pagination>
        </div>

        <!-- 备注 -->
        <el-dialog :visible.sync="adviseModal" title="处理意见" width="500px">
            <el-form ref="activity" :model="formAdd" :rules="formAddValidate" label-width="80px" class="demo-ruleForm">
                <el-form-item label="备注" prop="remark">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            placeholder="请输入内容"
                            v-model="formAdd.remark">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click.native="addSubmit('formAdd')">提交</el-button>
                    <el-button @click="addCancel()">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import axios from "@/axios";
    import moment from 'moment'
    import { isIntNum,getHeaders } from "@/assets/js/common";
    export default {
        name: "index",
        data() {
            return {
                base:{},
                ids: [],
                formItem: {
                    type: "",
                    keyword: "",
                    start_time: "",
                    end_time: ""
                },
                listData: [], // 用户列表
                pageTotal: 0,
                pageNum: 1,
                pageSize: 10,
                adviseModal: false,
                formAdd: {
                    id: "",
                    remark: ""
                },
                formAddValidate : {

                }
            }
        },
        mounted() {
            this.base = JSON.parse(sessionStorage.base);
            // 申请列表
            this.getApplyList();
        },
        methods: {
            //获取勾选参数
            select(val) {
                let vm = this;
                vm.ids = [];
                for (let i in val) {
                    vm.ids.push(val[i].id);
                }
            },
            // 批量删除
            deleteAll() {
                let vm = this;
                if (vm.ids.length < 1) {
                    vm.$message.error("请勾选数据！");
                    return false;
                }
                this.$confirm("是否确认删除吗？", "确认删除" , {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios
                        .post("/admin/member/apply/delete", {
                            ids: vm.ids
                        })
                        .then(response => {
                            let status = response.status;
                            let data = response.data;
                            if (data.code == 200) {
                                vm.$message({
                                    type: 'success',
                                    content: "操作成功!",
                                    onClose: function(msg) {
                                        vm.getApplyList();
                                        vm.ids = [];
                                    }
                                });
                            } else {
                                vm.$message.error(data.message);
                            }
                        })
                        .catch(error => {
                            //vm.$Message.info("网络或服务器异常");
                        });
                }).catch(() => {
                    vm.ids = [];
                    this.$refs.selection.selectAll(false);
                });
            },
            //当前页数
            handlePage(value) {
                this.pageNum = value;
                this.getApplyList();
            },
            //每页显示条数
            handlePageSize(value) {
                this.pageSize = value;
                this.getApplyList();
            },
            //搜索
            searchSubmit() {
                this.pageNum = 1;
                this.getApplyList();
            },
            //获取投诉列表
            getApplyList() {
                let vm = this;
                axios
                    .post("/admin/member/apply/getLists", {
                        page: this.pageNum,
                        limit: this.pageSize,
                        type: this.formItem.type,
                        keyword: this.formItem.keyword,
                        start_time: this.formItem.start_time ? moment(this.formItem.start_time).format('YYYY-MM-DD HH:mm:ss') : "",
                        end_time: this.formItem.end_time ? moment(this.formItem.end_time).format('YYYY-MM-DD HH:mm:ss') : "" ,
                    })
                    .then(response => {
                        let status = response.status;
                        let data = response.data;
                        if (data.code == 200) {
                            let result = data.data;
                            vm.pageTotal = result.total;
                            vm.listData = result.list;
                        } else {
                            vm.$message.info(data.message);
                        }
                    })
                    .catch(error => {
                        // vm.$Message.info("网络或服务器异常");
                    });
            },
            // 投诉
            dispose(index){
                this.adviseModal =true;
                this.formAdd.id = this.listData[index].id;
            },
            // 添加框取消
            addCancel() {
                this.adviseModal = false;
                this.formAdd.remark = "";
            },
            // 添加处理
            addSubmit(name) {
                let vm = this;
                vm.$refs.activity.validate(valid => {
                    if (valid) {
                        axios
                            .post("/admin/member/apply/dispose", vm.formAdd)
                            .then(response => {
                                let status = response.status;
                                let data = response.data;
                                if (data.code == 200) {
                                    vm.adviseModal = false;
                                    vm.formAdd.remark = "";
                                    vm.$message({
                                        type: 'success',
                                        message: "操作成功!",
                                        onClose: function (msg) {
                                            vm.getApplyList();
                                        }
                                    });
                                } else {
                                    vm.$message.error(data.message);
                                }
                            })
                            .catch(error => {
                                // vm.$Message.error("网络或服务器异常");
                            });
                    } else {
                        // vm.$Message.error("Fail!");
                    }
                });
            },
            //删除
            del: function (index = "") {
                let vm = this;
                //判断单条多条操作
                vm.ids = [];
                if (!isIntNum(index)) {
                    vm.ids.push(vm.listData[index].id);
                } else {
                    if (vm.ids.length < 1) {
                        vm.$message.error("请勾选数据！");
                        return false;
                    }
                }
                this.$confirm("是否确认删除吗？", "确认删除" , {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios
                        .post("/admin/member/apply/delete", {
                            ids: vm.ids
                        })
                        .then(response => {
                            let status = response.status;
                            let data = response.data;
                            if (data.code == 200) {
                                vm.$message({
                                    type: 'success',
                                    message: "操作成功!",
                                    onClose: function (msg) {
                                        vm.getApplyList();
                                        vm.ids = [];
                                    }
                                });
                            } else {
                                vm.$message.error(data.message);
                            }
                        })
                        .catch(error => {
                            //vm.$Message.info("网络或服务器异常");
                        });
                }).catch(() => {
                    vm.ids = [];
                    this.$refs.selection.selectAll(false);
                });
            },
        }
    }
</script>

<style scoped>

</style>